<template>
  <div id="tsinfo">
    <h2>TsInfo</h2>
    name <input type="text" :value="name" @input="$emit('update:name', $event.target.value)">

    <br>

    age <input type="text" :value="age" @input="$emit('update:age', $event.target.value)">

    <br>

    city
    <select @change="$emit('update:city', $event.target.value)">
      <option value="nj" :selected="city === 'nj'">南京</option>
      <option value="sh" :selected="city === 'sh'">上海</option>
      <option value="wx" :selected="city === 'wx'">无锡</option>
      <option value="sz" :selected="city === 'sz'">苏州</option>
    </select>
    <br>
    hobby
    <div @change="changeHobby">
      <input type="checkbox" value="css" :checked="hobby.includes('css')"> CSS
      <input type="checkbox" value="html" :checked="hobby.includes('html')"> HTML
      <input type="checkbox" value="js" :checked="hobby.includes('js')"> js
    </div>

    <br>
    gender

    <div @change="$emit('update:gender', $event.target.value)">
      <input type="radio" value="1" :checked="+gender === 1" /> 男
      <input type="radio" value="2" :checked="+gender === 2" /> 女
    </div>
  </div>
</template>
<script>
export default {
  props: ['name', 'age', 'city', 'hobby', 'gender'],
  methods: {
    changeHobby() {
      const arr = [...document.querySelectorAll('#tsinfo input[type="checkbox"]:checked')].map(el => el.value);
      this.$emit('update:hobby', arr);
    }
  }
};
</script>